import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import '@learnware/wpe/style.css';
import './main.css';
import App from './App.vue';

const app = createApp(App);
app.use(Antd);
app.mount('#prop-editor');

const readerFrame = document.querySelector('#learnware-renderer > iframe') as HTMLIFrameElement;
const pageWidth = 1280;
const pageHeight = 720;
const toolbarHeight = 50;
function calcReaderSize() {
  const ratio = pageHeight / pageWidth;
  const margin = 20;
  const propEditorWidth = 300;
  const width = window.innerWidth - 2 * margin - propEditorWidth;
  const height = window.innerHeight - toolbarHeight - 2 * margin;
  const scale = height / width > ratio ? width / pageWidth : height / pageHeight;
  return {
    scale,
    width: (window.innerWidth - propEditorWidth) / scale,
    height: (window.innerHeight - toolbarHeight) / scale,
  };
}
function updateReaderSize() {
  const { scale, width, height } = calcReaderSize();
  const $readerContainer = document.querySelector('#learnware-renderer') as HTMLElement;
  $readerContainer.style.transform = `scale(${scale})`;
  $readerContainer.style.width = `${width}px`;
  $readerContainer.style.height = `${height}px`;
}
window.addEventListener('resize', updateReaderSize);
setTimeout(() => updateReaderSize(), 100);

function loadEtb() {
  readerFrame.contentWindow?.postMessage(
    {
      type: "loadBook",
      data: {
        path: `${window.location.origin}/etb`,
        pageNumber: 1,
        clientType: 'teacher',
      },
    },
    "*"
  );
}
setTimeout(() => loadEtb(), 1000);

// window.addEventListener('message', (evt) => {
//   switch(evt.data.type) {
//     case 'reader:ready':
//       setTimeout(() => loadEtb(), 1000);
//       break;
//     default:
//       break;
//   }
// });